<template>
    <div>
        <my-nav-bar
            fixed
            title="弹框，兄弟"
            left-text="返回"
            right-text="按钮"
            @click-left="onClickLeft"
            @click-right="onClickRight"
        ></my-nav-bar>
        <h2 style="margin-top: 46px;"></h2>
        <my-button  size="large" type="primary" @click.native="show1 = true">中间弹出</my-button>
        <my-button size="large" type="warning" @click.native="show2 = true">下部弹出</my-button>
        <my-button size="large" type="danger" @click.native="show3 = true">左侧弹出</my-button>
        <my-button size="large" type="danger" @click.native="show4 = true">右侧弹出</my-button>

        <my-popup v-model="show1" position="center" width="90%">
            <div style="background-color:#fff;">
                <p>
                    1111
                </p>
                <p style="color:#F00;margin-top: 10px;">
                    呐~。
                </p>
                <p style="text-align: center;">
                    <my-button @click.native="show1 = false">Close Center Popup</my-button>
                </p>
            </div>
        </my-popup>


        <my-popup v-model="show2" position="bottom" height="60%">
            <my-button type="warning" style="margin: 30px;" @click.native="show2 = false">Close Bottom Popup</my-button>
        </my-popup>

        <my-popup v-model="show3" position="left" width="60%">
            <my-button type="danger" style="margin: 30px;" @click.native="show3 = false">Close Left Popup</my-button>
        </my-popup>

        <my-popup v-model="show4" position="right">
            <my-button type="danger" style="margin: 30px;" @click.native="show4 = false">Close Right Popup</my-button>
        </my-popup>
    </div>
</template>

<script>
export default {
  data() {
    return {
        show1: false,
        show2: false,
        show3: false,
        show4: false
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },

    onClickRight() {
      console.log("right");
    },
  }
};
</script>

<style lang="less" scoped>
my-button{
    margin-bottom: 30px;
}
</style>
